go_bunzee

디자인 시스템 vs. 생성형 UI | 매거진에 참여하세요

questTypeString.01quest1SubTypeString.03
publish_date : 25.07.22

디자인 시스템 vs. 생성형 UI

#디자인시스템 #필수 #최적화 #패턴 #AI #디자인 #간결화 #표준화

content_guide

어디까지 자동화할 것인가, 그리고 무엇을 남길 것인가 시대가 바뀌었다. "컴포넌트가 너무 많아!"

얼마 전까지만 해도 디자인 시스템은 조직의 체계성과 일관성의 상징이었죠.
구글의 Material Design, IBM의 Carbon, Shopify의 Polaris 같은 시스템이
그 자체로 하나의 제품처럼 운영되며 디자이너 사이에서 표준처럼 여겨졌습니다.

하지만 요즘 팀에서는 이런 얘기를 자주 듣게 됩니다:

“디자인 시스템이 너무 무겁고 복잡해.”
“이 작은 수정 하나 하려고도 컴포넌트 수정을 요청해야 해?”
“버튼 하나 바꾸는 데도 PR을 올려야 한다고?”

그 와중에 등장한 것이 바로 ‘생성형 UI(Generative UI)’입니다.
프롬프트 하나로 전체 UI를 자동 생성하거나, AI가 사용자 행동에 따라 UI를 조정해주는 구조죠.

디자인 시스템의 ‘성숙’과 ‘과잉’

디자인 시스템은 분명 강력합니다.

  • - 컴포넌트 재사용 → 개발 효율 증가

  • - 브랜드 일관성 → 사용자 신뢰 강화

  • - 협업 툴 통합 → 디자이너, 개발자 간 커뮤니케이션 최적화

하지만 시간이 지날수록 시스템은 복잡해지고 무거워집니다.

  • 사용되지 않는 컴포넌트가 계속 쌓이고, 작은 예외사항들이 별도 모듈로 계속 생기고,

  • 신입 디자이너는 시스템을 이해하기만 해도 며칠이 걸립니다.

그리고 결국, 우리는 디자인 시스템을 관리하기 위한 시스템을 만들게 됩니다.
이때부터 조직은 ‘자동화를 위해 만든 체계’에 스스로 발목이 잡히게 되죠.

생성형 UI의 등장은 이 흐름을 되묻는다

생성형 UI는 근본적으로 컴포넌트 설계 자체를 AI가 대신해주는 구조입니다.

예시를 들어볼게요:

  • 사용자가 원하는 기능을 입력하면,

  • AI가 버튼, 카드, 목록 등의 컴포넌트를 자동 생성하고 배치하며,

  • 상황에 따라 색상, 그림자, 인터랙션도 추천하거나 조정합니다.

👉 대표 툴들:

  • - Galileo AI: 프롬프트 기반으로 전체 UI 시안 생성

  • - Locofy AI / Anima: 디자인 → 코드 변환 자동화

  • - Figma AI: 컴포넌트 자동 제안 + 시맨틱 구조 분석

  • - Vercel AI SDK: 실제 사용자의 행동 패턴 기반 UI 생성

이런 흐름은 디자이너의 역할을 ‘UI 설계자’에서 ‘프롬프트 디렉터’로 바꿔놓고 있습니다.

이 둘의 핵심 차이점은 ‘시간’과 ‘맥락’이다

디자인 시스템은 ‘과거에 정의된 규칙’을 기반으로 하며,
생성형 UI는 ‘현재 맥락에 따라 구성되는 결과물’을 기반으로 합니다.

즉, 디자인 시스템은 지속성, 생성형 UI는 적응성이 강점인 셈이죠.

구분

디자인 시스템

생성형 UI

목표

일관성과 재사용

유연성과 빠른 생산

사용자

조직 중심

개인·상황 중심

유지보수

지속적인 관리 필요

프롬프트 기반 리셋 가능

속도

초기 느림, 이후 빠름

초기 빠름, 이후 불확실

인간의 역할

시스템 설계자

선택/감별자

그럼 디자이너는 어디서부터 어디까지 자동화해야 할까?

디자이너로서 가장 중요한 질문은 바로 이거죠. “우리는 무엇을 자동화하고, 무엇을 직접 해야 할까?”

자동화해도 좋은 영역

  • 카드/버튼/배너/모달 같은 반복형 UI 구조

  • 화면 간 흐름 (예: 온보딩 → 로그인 → 홈)

  • 기본 텍스트/아이콘/그림 배치

사람이 직접 다뤄야 하는 영역

  • 사용자 감정과 반응을 고려한 인터랙션

  • 브랜드 무드보드, 컬러/타이포 아이덴티티

  • 제품의 핵심 가치를 설명하는 시각 구조

즉, 구조는 AI가 짜고, 의미는 사람이 부여해야 합니다.

두 방식을 결합한 하이브리드 전략이 필요하다

앞으로의 디자인 조직은 이렇게 운영될 가능성이 큽니다:

  1. - 디자인 시스템은 최소 단위로 단순화

    • 핵심 UI 컴포넌트만 유지 (버튼, 인풋, 카드 등)

    • 나머지는 프롬프트 기반으로 생성

  2. - 디자이너는 AI를 디렉팅하는 역할로 전환

    • 프롬프트 디자인, UX 감정 분석, 브랜드 정체성 조율

  3. - AI가 생성한 시안은 디자이너가 감별, 개선

    • 리뷰 단계에서 일관성 보완, 브랜드 적용, 접근성 점검

디자인 시스템 → 생성형 UI로 전환한 실제 예제 흐름

기존 구조: 무겁고 복잡한 디자인 시스템

  • 컴포넌트: 총 80개 (버튼, 카드, 셀렉트, 모달, 배너 등)

  • 사용 툴: Figma + Storybook + GitHub

  • - 문제점:

    • 새 UI 추가할 때마다 기존 컴포넌트와의 일관성 충돌

    • Figma 내 컴포넌트 조립이 느림 (Override, Variant 과다)

    • 디자이너 1명 + 개발자 2명 → 유지보수 부담

전환 목표

  • 반복 UI는 자동화

  • 핵심 경험과 브랜드는 수작업 유지

  • 시스템 전체를 줄이되, 더 빠르게 사용할 수 있게

전환 플로우

단계

설명

사용 툴

1. 핵심 컴포넌트 선정

실제 자주 쓰는 컴포넌트만 유지 (약 15개)

Figma

2. Figma Tokens로 변수 관리

색상/폰트/간격을 변수화

Figma Tokens Plugin

3. 나머지 UI는 생성형으로

Galileo AI 또는 Figma AI로 자동 생성

Galileo, Magician

4. 시안은 AI → 디자이너 감수 구조로

시안 초안은 AI 생성 → 디자이너가 감정·맥락 추가

ChatGPT, Figma

5. 개발팀과 ‘디자인 QA’만 연동

코드 레벨 적용은 핵심 컴포넌트만

Storybook minimal

최종 구조 요약

영역

전략

시스템 핵심 컴포넌트

10~15개 정도로 유지

반복 UI 요소

생성형 UI로 전환

스타일 토큰

Figma Tokens로 통일

프롬프트 작성법

디자이너가 주도

감수 기준

브랜드 톤, 인터랙션 디테일, 접근성

결론: 디자인 시스템은 사라지지 않는다. 단지 ‘방식’이 바뀔 뿐이다

생성형 UI의 등장으로 인해, 디자인 시스템이 무너지는 건 아닙니다.
오히려 ‘더 작고 민첩한 디자인 시스템’이 필요해진 거죠.

앞으로는 방대한 가이드라인 대신,

  • - 프롬프트 패턴화된 컴포넌트

  • - AI를 위한 설계 규칙(Meta Design Rules)

  • - 사용자 데이터 기반의 UI 최적화 흐름

이런 것들이 디자인 시스템의 새 얼굴이 될 겁니다.

우리는 디자인을 더 이상 ‘정의’하는 것이 아니라, ‘조정하고, 반응하고, 선택하는 일’로 바꿔나가고 있습니다.

그리고 그 중심에 있는 건 디자이너입니다. 자동화를 받아들이되, 주도권은 놓지 마세요.